import React from 'react'
import {ClassProps, FunctionProps} from './components/PropsTest'

class App extends React.Component {

  state = {
    person: {
      name: 'Bob',
      age: 23
    }
  }


  render () {
    console.log('App render()')
    const {name, age} = this.state.person

    return <div>
      <h3>App 用户信息: name: {name}, age: {age}</h3>
      <button onClick={()=> {
        this.setState({
          person: {
            name: name + '-',
            age: age + 1
          }
        })
      }}>更新用户</button>


      {/* 
      向子组件标签传递属性  传递state数据
      父组件更新state数据, 子组件也会更新
      setState() => 重新render() => 对所有的子组件也会重新render
      */}
      <ClassProps name={name} age={'123'}/>
      <FunctionProps myName={name} myAge={age}/>
    </div>
  }
}
/* 
渲染组件标签时
  函数组件 => 调用组件函数(包含标签属性的对象)
        FunctionProps({myName: 'Jack', myAge: 15})
  类组件 => 创建组件对象, 
            封装一个包含标签属性的对象, 保存到组件对象的props属性上
            调用render方法
*/

export default App